<template>
  <div class="item-box" 
  v-for="item in menuOptions"
   :key="item.title"
   draggable="true"
   @dragstart="dragstartHandle($event,item)"
   @dblclick="dblclickHandle(item)"
        @click="clickHandle(item)"
   >
  {{ item.title }}
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { componentInstall, JSONStringify } from '@/utils/components'
import { fetchConfigComponent, fetchChartComponent } from '@/views/drag/package/index'
let props = defineProps({
  menuOptions: {
    type: Array,
    default: () => []
  }
})
let dragstartHandle = (e,item) => {
  if (item.disabled) return
  e!.dataTransfer!.setData('ChartData', JSONStringify(item))
  console.log(fetchChartComponent(item))
  // 动态注册图表组件
  componentInstall(item.chartKey, fetchChartComponent(item))
  // componentInstall(item.conKey, fetchConfigComponent(item))
  // 将配置项绑定到拖拽属性上

}
let dblclickHandle=(item) => {

}
let clickHandle=(item) => {

}
</script>
<style lang="scss" scoped>
.item-box{
  height: 100px;
border: 1px solid #999999;
position: relative;
cursor: pointer;
z-index: 99;
}
</style>